<template>
	<view>
		<view class="actionBar">
			<view class="marginLeft-20" style="width:200rpx;">
				<view class="fs-28 bold" style="color:#000;">{{ Math.abs(CutWalletPrice) }} 金币</view>
				<view class="fs-20 marginTop-5" style="color:#999;">剩余：{{ Math.round(WalletYue) }}金币</view>
			</view>
			<view class="baomingBtn" @click="onSubmit">确定提交</view>
		</view>

		<view class="commCards row-between" style="height:70rpx;">
			<view>
				<head-wear :width="90" :height="90" border-width="4" :userInfo="ReservationOrder"
					:WxHeadPic="ReservationOrder.WxHeadPic" :UserLevelID="ReservationOrder.UserLevelID" image-width="30"
					image-height="20" size="16" right="-7" bottom="0" oneRight="0"></head-wear>
				<view class="marginLeft-20" style="float:left;">
					<view class="fs-30 row-start" style="max-width: 450rpx;">
						<view class="one-ellipsis">{{ ReservationOrder.NickName }}</view>
						<view v-if="ReservationOrder.UserSex">
							<image src="/static/icon/boy.png" class="sex-image-size marginLeft-10" mode="widthFix"
								v-if="JSON.parse(ReservationOrder.UserSex).value == 1"></image>
							<image src="/static/icon/girl.png" class="sex-image-size marginLeft-10" mode="widthFix"
								v-if="JSON.parse(ReservationOrder.UserSex).value == 0"></image>
						</view>
						<auth-label v-if="ReservationOrder.isAuthOk == 2" :size="18" height="30"></auth-label>
						<personality-label v-if="ReservationOrder.BeautifulWomen == 1" :size="18"
							height="30"></personality-label>
						<image :src="baseUrl + 'icon/enterprise.png'" class="company-image-size marginLeft-10"
							v-if="ReservationOrder.isCompanyAuth && ReservationOrder.isCompanyAuth == 1"></image>

					</view>
					<view class="fs-22 marginTop-8" style="color:#999;max-width: 450rpx;">
						<text v-for="(item,index) in UserRoles" :key="index">
							{{ item.LabelName }}
							<text v-if="index < UserRoles.length - 1">，</text>
						</text>
						<text v-if="ReservationOrder.UserCity !== '请设置您所在的城市'">｜ {{ ReservationOrder.UserCity }}</text>
					</view>
				</view>
			</view>
			<view class="fs-20 ">
				<view class="text-align-right flex-1" style="color:#2cff5d;" v-if="ReservationOrder.isOnline == 1">在线
				</view>
				<view class="text-align-right flex-1" style="color:#d6d6d6;" v-else>
					{{ $common.timeDiff(ReservationOrder.onlineTime,new Date()) }}</view>
			</view>
		</view>


		<view class="commCards">
			<view class="commCardTitle">约单理由</view>
			<view class="marginTop-20">
				<fui-textarea placeholder="请输入内容" size="24" backgroundColor="#f0f0f0" radius="20" height="100rpx"
					v-model="form.SignupMemo"></fui-textarea>
			</view>
		</view>

		<view class="commCards">
			<view class="commCardTitle">确认报名信息</view>
			<view class="borderR-10 padding-all-30 marginTop-20 row-between" style="background-color:#f0f0f0;"
				@click="navTo(`/notice/addInfo`)">
				<view class="row-start">
					<view>
						<view class="text-align-center">
							<fui-icon name="idcard-fill" size="64"></fui-icon>
						</view>
						<view>我的联系信息</view>
					</view>
					<view class="fs-24 marginLeft-20">
						<view>{{ signUpInfo.ContactName ? signUpInfo.ContactName : '未设置' }}</view>
						<view v-if="signUpInfo.isShowWeixin == 1">
							微信号：{{ signUpInfo.WeixinCode ? signUpInfo.WeixinCode : '未设置' }}</view>
						<view v-if="signUpInfo.isShowMobile == 1">
							手机号：{{ signUpInfo.UserMobile ? signUpInfo.UserMobile : '未设置' }}</view>
						<view v-if="signUpInfo.isShowQQ == 1">QQ号：{{ signUpInfo.QQCode ? signUpInfo.QQCode: '未设置' }}
						</view>
					</view>
				</view>
				<view>
					<fui-icon name="arrowright" size="34"></fui-icon>
				</view>
			</view>
		</view>

		<view class="fs-24" style="color: #d0d0d0;padding: 0 50rpx;">
			<view class="marginTop-15">
				温馨提示：
			</view>
			<view class="marginTop-10">
				1.平台禁止一切色情邀约
			</view>
			<view class="marginTop-10">
				2.切勿独自与陌生人在室内约单
			</view>
			<view class="marginTop-10">
				3.切勿轻易相信先交纳费用或定金的合作，发生经济纠纷，平台概不负责
			</view>
			<view class="marginTop-10">
				4.涉及收费合作，平台无法担保结清尾款，请谨慎合作
			</view>
		</view>
		<uni-popup type="center" ref="SecurePrompt">
			<view class="borderR-15 padding-all-15" style="width: 65vw;background-color: #fff;">
				<view class="text-align-right" @click="$refs.SecurePrompt.close()">
					<uni-icons type="closeempty" size="18"></uni-icons>
				</view>

				<view class="">
					<view class="text-align-center">
						<image :src="baseUrl + 'icon/head.png'" style="width: 100rpx;height: 100rpx;" mode="widthFix">
						</image>
					</view>
					<view class="text-align-center fs-36 marginTop-30">
						安全防骗提醒
					</view>
					<view class="fs-26 padding-left-right-30 marginTop-20">
						<text class="fs-30">①</text>切勿独自与陌生人在室内约拍！<text class="fs-30">②</text>切勿私下发送私密隐私照片！<text
							class="fs-30">③</text>未见面先收费的合作，切勿相信！
					</view>
					<view class="fs-26 text-align-center marginTop-20">
						<text style="color: #bfbfbf;">更多查看</text><text class="marginLeft-10" style="color: #54bef6;"
							@click="$common.goNavPage('/pages/index/advert/advert?adid=2')">《防骗指南》</text>
					</view>
					<button class="popupButton" @click="$refs.SecurePrompt.close()">我知道了</button>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import AuthLabel from "@/components/authLabel.vue";
	import PersonalityLabel from "@/components/personalityLabel.vue";
	import HeadWear from "@/components/headwear.vue"
	export default {
		components: {
			AuthLabel,
			PersonalityLabel,
			HeadWear,
		},
		data() {
			return {
				OrderID: 0,
				UserRoles: [],
				ReservationOrder: {},
				// 接收报名信息
				signUpInfo: {},
				form: {
					SignupMemo: ''
				},
				// 被约单的人ID
				CoverReservationorderID: 0,
				CutWalletPrice: 0,
				WalletYue: 0,
				baseUrl: ''
			};
		},
		onLoad(option) {
			this.baseUrl = this.$baseUrl;
			this.OrderID = option.OrderID;
			this.CoverReservationorderID = option.coverReservationorderID
		},
		onShow() {
			this.$refs.SecurePrompt.open()
			this.getReservationOrder()
		},

		methods: {
			navTo(url) {
				uni.navigateTo({
					url
				})
			},

			getReservationOrder() {
				this.$httpost('/ReservationOrders/ReservationOrderYueDan', {
					ReservationOrderID: this.OrderID,
					CoverReservationorderID: this.CoverReservationorderID,
				}).then(res => {
					// console.log('ReservationOrder', res);
					if (res.code == 200) {
						this.ReservationOrder = res.data.ReservationOrder;
						this.ReservationOrderInfo = res.data.ReservationOrderInfo
						this.UserRoles = res.data.UserRoles
						this.WalletYue = res.data.WalletYue
						this.CutWalletPrice = res.data.CutWalletPrice
						this.getUserInfo();
					}
				});
			},

			getUserInfo() {
				this.signUpInfo.ContactName = this.ReservationOrderInfo.ContactName
				this.signUpInfo.UserMobile = this.ReservationOrderInfo.UserMobile
				this.signUpInfo.isShowMobile = this.ReservationOrderInfo.isShowMobile
				this.signUpInfo.WeixinCode = this.ReservationOrderInfo.WeixinCode
				this.signUpInfo.isShowWeixin = this.ReservationOrderInfo.isShowWeixin
				this.signUpInfo.QQCode = this.ReservationOrderInfo.QQCode
				this.signUpInfo.isShowQQ = this.ReservationOrderInfo.isShowQQ
			},

			onSubmit() {
				// let userInfo = uni.getStorageSync("isLogin");
				// if (userInfo.UserID == this.ReservationOrderInfo.UserID) {
				// 	uni.showToast({
				// 		title: '自己不能约自己！',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				if (!this.form.SignupMemo) {
					uni.showToast({
						title: '请填写联系需求！',
						icon: 'none'
					});
					return false;
				}

				if (!this.signUpInfo.ContactName) {
					uni.showToast({
						title: '请填写联系人！',
						icon: 'none'
					})
					return false;
				}

				if (!this.signUpInfo.UserMobile && !this.signUpInfo.WeixinCode && !this.signUpInfo.QQCode) {
					uni.showToast({
						title: '手机号、微信号、QQ号务必填写一项！',
						icon: 'none'
					})
					return false;
				}


				if (this.WalletYue < this.CutWalletPrice) {
					uni.showModal({
						title: '金币不足！',
						content: '请充值',
						confirmText: '去充值',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: `/myPages/pages/myWallet?UserID=${this.SpeedContactInfo.myUserinfo.UserID}`
								})
							}
						}
					})
					return false;
				}

				let options = {
					// 约单人的id
					ReservationOrderID: this.OrderID,
					// 提交的信息
					SignupMemo: this.form.SignupMemo,
					// 我的ID// 
					SignupUserID: this.ReservationOrderInfo.UserID,
					SignupType: 0, // 0 约单 ， 1极速联系
					ContactName: this.ReservationOrderInfo.ContactName,
					UserMobile: this.ReservationOrderInfo.UserMobile,
					WeixinCode: this.ReservationOrderInfo.WeixinCode,
					QQCode: this.ReservationOrderInfo.QQCode
				};

				if (uni.getStorageSync("isLogin")) {
					this.$httpost('/ReservationOrders/ReservationOrderSignUp', options).then(res => {
						// console.log('YuedanBaoming', res);
						if (res.code == 200) {

							uni.showModal({
								title: '约单已成功提交，请等待联系',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.showToast({
											title: `已约单，消耗${Math.abs(this.CutWalletPrice)}金币`,
											icon: 'none'
										})

										setTimeout(() => {
											this.$common.goSwtPage('/pages/index/index');
										}, 1000)
									}
								}
							})


							// if (res.data !== 0) {
							// 	uni.showToast({
							// 		title: '约单已成功提交，请等待联系！',
							// 		icon: 'none'
							// 	})
							// 	this.$common.goNavPage('/myPages/pages/yuedanRequest')
							// } else {
							// 	uni.showToast({
							// 		title: '你已经约单，请等待联系！',
							// 		icon: 'none'
							// 	})
							// }
						}
					});
				} else {
					this.$common.goNavPage('/pages/login/weixinlogin');
				}
			}
		}
	}
</script>

<style lang="scss">
	.NoticeUserHeadPic {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background-color: #CCC;
	}

	.NoticeUserHeadPic image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
	}

	.actionBar {
		padding: 20rpx;
		position: fixed;
		z-index: 100;
		bottom: 0;
		left: 0;
		right: 0;
		height: 110rpx;
		display: flex;
		justify-content: space-between;
		background-color: #FFF;
	}

	.baomingBtn {
		background-color: $globalColor;
		color: #333;
		text-align: center;
		width: 190rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		margin: 10rpx;
	}

	.popupButton::after {
		border: none;
	}

	.popupButton {
		width: 100%;
		background-color: #FFDD00;
		height: 80rpx;
		margin-top: 35rpx;
		font-size: 28rpx;
	}
</style>